<template>
  <div class="shipin" v-if="item.video">
    <div class="videoShow" v-if="lookVideo && videoid==item.id">
      <video :src="item.video.url" controls autoplay></video>
      <span class="closeVideo" @click="lookVideo = false"
        ><i class="iconfont icon-guanbi-quxiao-guanbi" aria-hidden="true"></i
      ></span>
    </div>
    <div class="content" v-else>
      <!-- <video src="" preload="none"></video> -->
      <img :src="item.images[0].url" alt="" />
      <p class="shipinDesc">{{ item.title }}</p>
      <span class="shipinTime">{{
        item && item.video && item.video.dur | formatNum
      }}</span>
      <!-- <span class="play"  @click="lookVideo = true"
        ><i class="fa fa-play-circle-o" aria-hidden="true"></i
      ></span> -->
      <span class="play"  @click="fanchuanzhi"
        ><i class="iconfont icon-bofangqi-bofang" aria-hidden="true"></i
      ></span>
    </div>
    <div class="userInfo">
      <img :src="item.user.avatarurl" alt="" />
      <span class="username">{{
        item && item.user && item.user.nickName
      }}</span>
      <span @click="goodCount = !goodCount" :class="['goodicon',{yidianzan:goodCount}]"
        ><i class="iconfont icon-dianzan"></i
        ><span class="num">{{ goodCount?dianzan+1:dianzan }}</span></span
      >
      <span class="commonicon"
        ><i class="iconfont icon-pinglun"></i
        ><span class="commonnum">{{ item.commentCount }}</span></span
      >
      <span class="shareicon"><van-icon name="share-o" /></span>
    </div>
    <!-- {{item}} -->
  </div>
</template>

<script>
export default {
  props: ["item","videoid"],
  data() {
    return {
      dianzan: this.item.upCount,
      lookVideo: false,
      goodCount: false,
    };
  },
  filters: {
    formatNum(value) {
      let m = parseInt(value / 60);
      let s = value % 60;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
      return m + ":" + s;
    },
  },
  methods:{
    fanchuanzhi(){
      this.lookVideo=true;
      this.$emit("changevideo",this.item.id);
      
    }
  }
};
</script>

<style lang="less">
.shipin {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  .videoShow {
    position: relative;
    video {
      width: 100%;
      max-height: 234px;
    }
    .closeVideo {
      position: absolute;
      font-size: 20px;
      right: 10px;
      color: rgb(214, 141, 141);
      top: 10px;
    }
  }
  .content {
    position: relative;
    flex: 1;
    height: 234px;
    img {
      display: block;
      width: 100%;
      // height: 100%;
      max-height: 234px;
    }
    .shipinDesc {
      position: absolute;
      font-size: 18px;
      top: 0;
      color: rgba(241, 238, 238, 0.945);
      padding: 15px;
    }
    .shipinTime {
      position: absolute;
      font-size: 10px;
      bottom: 10px;
      right: 10px;
      color: white;
    }
    .play {
      position: absolute;
      font-size: 60px;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      //    color: rgba(0, 0, 0, .5);
      color: rgb(211, 211, 211);

      i{
        font-size: 60px;
      }
      //    background: rgba(0, 0, 0, .5);
    }
  }
  .userInfo {
    height: 50px;
    display: flex;
    align-items: center;

    box-sizing: border-box;
    font-size: 15px;
    img {
      display: inline-block;
      width: 22px;
      height: 22px;
      padding: 10px;
      border-radius: 50%;
    }
    .username {
      width: 50%;
    }
    .goodicon {
      font-size: 16px;
      width: 15%;
      &.yidianzan {
        color: red;
      }
      .num {
        margin-left: 5px;
        font-size: 13px;
        color: black;
      }
    }
    .commonicon {
      font-size: 16px;
      width: 15%;

      .commonnum {
        font-size: 13px;
        margin-left: 5px;
      }
    }
    .shareicon {
      font-size: 16px;
      width: 5%;
    }
  }
}
</style>